import React ,{useState,useMemo,useEffect}from 'react';
import axios from 'axios'
import './../css/common.css'
const Search = () => {
    const [keyValue, setkeyValue] = useState("");
    const [cinemaList, setcinemaList] = useState([]);

    useEffect(
        ()=>{
            axios({
                url:"https://m.maizuo.com/gateway?cityId=310100&ticketFlag=1&k=7684965",
                method:'get',
                headers:{
                    'X-Client-Info':'{"a":"3000","ch":"1002","v":"5.0.4","e":"16395416565231270166529","bc":"110100"}',
                    'X-Host':'mall.film-ticket.cinema.list'
                }
            }).then(res=>setcinemaList(res.data.data.cinemas))
        }
    ,[])

    
    const searchCinema=useMemo(
        ()=>{
            return cinemaList.filter(item=>
                item.name.toUpperCase().includes(keyValue)||item.address.toUpperCase().includes(keyValue)
            )
        }
            
        
    ,[cinemaList,keyValue])
    return (
        <div>
            <input value={keyValue} onInput={(e)=>{
                setkeyValue(e.target.value)
            }}/>
            {searchCinema.map(item=>
                <dl key={item.cinemaId}>
                    <dt>{item.name}</dt>
                    <dd>{item.address}</dd>
                </dl>    
            )}
        </div>
    )
}

export default Search;
